<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- van-index-bar: 索引拦
        van-index-bar  index-list:索引栏右边的索引字符:[索引字符],
           van-index-anchor  定义索引 栏跳转到的地方   
                 index:锚点值(和index-list内的值互相对应)
     -->
      <van-index-bar :index-list="indexList">
        <van-index-anchor index="热">热门城市</van-index-anchor>
        <van-cell title="北京"></van-cell>
        <van-cell title="上海"></van-cell>
        <van-cell title="广州"></van-cell>
        <van-cell title="深圳"></van-cell>
        <van-index-anchor index="广">广东省</van-index-anchor>
        <van-cell title="广州"></van-cell>
        <van-cell title="深圳"></van-cell>
        <van-cell title="中山"></van-cell>
        <van-cell title="东莞"></van-cell>
        <van-cell title="广州"></van-cell>
        <van-cell title="深圳"></van-cell>
        <van-cell title="中山"></van-cell>
        <van-cell title="东莞"></van-cell>
        <van-cell title="广州"></van-cell>
        <van-cell title="深圳"></van-cell>
        <van-cell title="中山"></van-cell>
        <van-cell title="东莞"></van-cell>
        <van-cell title="广州"></van-cell>
        <van-cell title="深圳"></van-cell>
        <van-cell title="中山"></van-cell>
        <van-cell title="东莞"></van-cell>
        <van-cell title="广州"></van-cell>
        <van-cell title="深圳"></van-cell>
        <van-cell title="中山"></van-cell>
        <van-cell title="东莞"></van-cell>
        <van-cell title="广州"></van-cell>
        <van-cell title="深圳"></van-cell>
        <van-cell title="中山"></van-cell>
        <van-cell title="东莞"></van-cell>
        <van-index-anchor index="湖">湖北</van-index-anchor>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
        <van-cell title="武汉"></van-cell>
      </van-index-bar>
    </div>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"
    />

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          indexList: ['热', '广', '湖']
        },
        methods: {}
      })
    </script>
  </body>
</html>
